<template>
    <div class="mt-3 bg-white p-6 overflow-hidden">
        <h3 class="text-default">用户信息</h3>
        <a-divider class="!my-1" />
        <p><span class=" inline-block w-20">用户名：</span>{{ userInfo.name }}</p>
        <p><span class=" inline-block w-20">电话：</span>{{ userInfo.phone }}</p>
        <p>
            <span class=" inline-block w-20">会员状态：</span>
            {{ userStatus.member_status == 'not_opened' ? "未开通" : userStatus.member_status == 'opened' ? "已开通" : "已过期" }}
        </p>
        <p><span class=" inline-block w-20">到期时间：</span>{{ userStatus.member_expiration }}</p>
        <a-button v-if="!showCoupons" @click="showCoupons = true" class=" bg-base text-white mt-2">使用兑换码</a-button>
        <template v-else>
            <a-input class=" !mt-2" v-model:value.trim="coupon_code" placeholder="请输入优惠券码" />
            <a-button @click="submitCoupon" class=" bg-base text-white mt-2">提交</a-button>
            <a-button @click="showCoupons = false; coupon_code = ''" class=" mt-2 ml-2">取消</a-button>
        </template>

        <h3 class="text-default mt-4">月度使用量</h3>
        <a-divider class="!my-1" />
        <a-select v-model:value="currentMonth" class=" w-64" @change="getData">
            <a-select-option v-for="item  in  12" :value="item" :key="item">{{ item }}月份</a-select-option>
        </a-select>
        <div id="used" class=" h-80"></div>

        <h3 class="text-default mt-4">
            总使用量
            <a-tooltip>
                <template
                    #title>在ChatGPT模型中，英文单词会被视为1个Token，中文单词被视为多个Token（约4个，根据单词的常见度）。在GPT3.5版本的使用中，根据不同的使用频率和输出内容，Token消耗的速度也不同。平均估算每10000个Token≈4000-5000字。</template>
                <info-circle-outlined class=" align-middle ml-1" />
            </a-tooltip>
        </h3>
        <a-divider class="!my-1" />
        <div class="flex w-4/5">
            <a-progress :percent="(usedData.used / usedData.total) * 100">
                <template #format>
                    <span>{{ `${usedData.used} /${usedData.total}` }}</span>
                </template>
            </a-progress>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { sessions, tokens, useCoupons } from '@/request/api'
import { decrypt } from '@/utils/crypto'
import echarts from '@/utils/echarts'
import { InfoCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Cookies from 'js-cookie'
let userInfo = reactive({ ...JSON.parse(decrypt(Cookies.get('info'))) })
const usedData = reactive({
    total: 0,
    used: 0,
})
let currentMonth = ref<number>(new Date().getMonth() + 1)
let usedDom: any
let userStatus = reactive({
    member_status: '',
    member_expiration: ''
})
let showCoupons = ref<boolean>(false)
let coupon_code = ref<string>('')
const getData = (month: number = new Date().getMonth() + 1) => {
    sessions().then(res => {
        if (res.code == 200) {
            userStatus = Object.assign(userStatus, res.result)
        }
    })

    tokens(month).then((res) => {
        if (res.code == 200) {
            const { month_used, total, used } = res.result
            usedData.total = total
            usedData.used = used
            usedDom.setOption({
                xAxis: {
                    data: month_used.map(
                        (item: any, index: number) =>
                            `${currentMonth.value}/${index + 1}`
                    ),
                    type: 'category', //类名轴
                    axisLabel: {
                        // 坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#d7d7d7', //x轴字体颜色
                        },
                    },
                },
                yAxis: {
                    name: '次',
                },
                tooltip: {
                    show: true,
                },
                series: [
                    {
                        type: 'bar',
                        data: month_used.map(
                            (item: any, index: number) => item
                        ),
                    },
                ],
            })
        }
    })
}

onMounted(() => {
    usedDom = echarts.init(document.getElementById(`used`) as HTMLElement)
    getData(currentMonth.value)
})

const submitCoupon = () => {
    if (coupon_code.value) {
        useCoupons(coupon_code.value).then((res) => {
            if (res.code == 200) {
                message.success('兑换成功')
                getData()
                showCoupons.value = false
            }
        })
    } else {
        message.error('优惠券码不可为空')
    }
}
</script>